<!--  -->
<template>
  <div class='login_page'>
    <div class="bg_box">
      <img class="bg_img" src="../assets/bg_img.jpg" alt="">
    </div>
    <div class="form_box">
      <img class="img_margin" width="274px" src="http://www.jxslsd.com/images2/logo1.jpg" alt="">
      <el-form :model="formData" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="" prop="phone">
          <el-input v-model="formData.phone" type="number" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="" prop="'password" style="position: relative;">
          <el-input v-model="formData.password" :type="iconFlag ? '' : 'password'" placeholder="请输入密码"></el-input>
          <i @click="iconFlag = !iconFlag" :class="iconFlag ? 'iconfont icon_localtion icon-yanjing_xianshi_o' : 'iconfont icon_localtion icon-yanjing_yincang_o' "></i>
        </el-form-item>
        <el-form-item>
        <el-button @click="submitForm('ruleForm')" class="login_btn">登录</el-button>
      </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      formData: {
        phone: '15907985725',
        password: '',
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度11个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 10, message: '长度6-10个字符', trigger: 'blur' }
        ]
      },
      iconFlag:false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.formData.phone == 15907985725 && this.formData.password == 123456){
              // console.log('登入成功');\
              this.$message.success('登入成功')
              const userInfo = {
                name : '桂志宏',
                roleName :'管理员'

              }
              localStorage.setItem("userInfo",JSON.stringify(userInfo))
              this.$router.push('/')
            }else{
              if(this.formData.phone == 15907985725){
                // console.log('密码错误');
                this.$message.error('密码错误')
              }
              else{
                // console.log('手机号未注册');
                this.$message.error('手机号未注册')
              }
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.login_page {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-between;

  .form_box {
    width: 500px;
    padding: 0 50px;
    box-sizing: border-box;
    // background-color: red;
  }

  .bg_box {
    width: calc(100% - 550px);
    // background-color: aqua;
  }
  .login_btn{
    width: 100%;
    color: white;
    background-color: blue;
  }
  .el_form{
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    width:500px ;
  }
  .img_margin{
    margin-top: calc(40vh - 143px);
    margin-left:calc(50% - 137px);
    margin-bottom: 20px;
  }
  .bg_img{
   width: 100%;
   margin-top: calc(40vh - 100px);
   
  }
  .icon_localtion{
    position: absolute;
    font-size: 20px;
    right: 10px;
    top: 1px;
  }

}




</style>